<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--  todo 需要的时候再加前缀<base href="/bstabletest/">-->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>快递单号查询</title>
    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- bootbox -->
    <script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.min.js"></script>

    <!-- bootstrap-table -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">

    <div class="row">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <a class="navbar-brand" href="http://mhtclub.com">我的个人主页</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target="#collapseMenu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapseMenu">
                <ul class="nav navbar-nav">
                    <li class="nav-li">
                        <a href="https://github.com/hellowHuaairen/kuaidi" target="_blank">本项目github</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

    <h1 class="page-header">
        快递单号自助查询
    </h1>

    <!-- 查询工具栏 -->
    <div class="form-inline">
        <div class="form-group" style="display: none;">
            <label for="queryNameText">收件人姓名：</label>
            <input id="queryNameText" class="form-control input-sm">
        </div>
        <div class="form-group">
            <label for="queryPhoneText">收件人电话：</label>
            <input id="queryPhoneText" class="form-control input-sm">
        </div>
        <button class="btn btn-primary btn-sm" id="queryBtn">查询</button>
    </div>
    <hr>

    <div id="tableDiv"></div>
    <!--<table id="testTable"></table>-->
</div>

<script type="text/javascript" >
    $(document).ready(function(){
        // 点击查询按钮，年龄符合查询条件方可跳转查询
        $('#queryBtn').click(function () {
            var queryPhoneStr = $("#queryPhoneText").val();
            //每一先删除创建的表格
            $("#tableDiv").empty();
            if(null != queryPhoneStr && '' !== queryPhoneStr){
                if(!(/^1[3456789]\d{9}$/.test(queryPhoneStr))){
                    alert("手机号码有误，请重填！！！");
					return false;
                }
                queryDataList();

            }else{
                alert("请填写收件人电话！！！")
            }

        });
        function queryDataList() {
            // 每一次点击查询就新增表格控件
            $("#tableDiv").append("<table id='testTable'></table>");
            var $testTable = $('#testTable');
            $testTable.bootstrapTable({
                url: 'getList',
                queryParams: function (params) {
                    return {
                        offset: params.offset,
                        limit: params.limit,
                        userName: $('#queryNameText').val(),
                        phone: $('#queryPhoneText').val()
                    }
                },
                columns: [{
                    field: 'id',
                    title: '编号'
                }, {
                    field: 'userName',
                    title: '收件人姓名'
                }, {
                    field: 'phone',
                    title: '收件人电话'
                }, {
                    field: 'kuaidiNo',
                    title: '快递单号',
                    formatter: function (value, row, index) {
                        return [
                            '<a href="https://m.kuaidi100.com/app/query/?com=' + row.company + '&nu='+ row.kuaidiNo +'">'+ row.kuaidiNo + '</a>'
                        ].join('');
                    }
                }],
                striped: true,
                pagination: true,
                sidePagination: 'server',
                pageSize: 10,
                pageList: [5, 10, 25, 50, 100],
                rowStyle: function (row, index) {
                    var ageClass = '';
                    if (row.age < 18) {
                        ageClass = 'text-danger';
                    }
                    return {classes: ageClass}
                }
            });
        }
    })
</script>
</body>
</html>